<template>
	<view class="page">
		<u-section title="实时热搜" :show-line='false' :slotsRight='true'>
			<template #right>
				<u-icon solt='right' name="reload" color="#2979ff" size="28" @click='onClick'></u-icon>
			</template>
		</u-section>
		<view class="u-p-t-20 u-flex u-flex-wrap">
			<view class="item u-m-r-20 u-m-b-20" v-for="(item,index) in hotSearch" :key="index" @click="goPage(item)">
				{{item}}
			</view>
		</view>
		
		<u-section class='u-m-t-10' title="新品" :right='false' :show-line='false'></u-section>
		<view class="u-p-t-20 u-flex u-flex-wrap">
			<view class="item u-m-r-20 u-m-b-20" v-for="(item,index) in newSearch" :key="index" @click="goPage(item)">
				{{item}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hotSearch:['充值卡','芒果','火锅','电子购物卡','鸡蛋'],
				newSearch:['肉卷','鸡柳'],
				searchVal:''
			}
		},
		onNavigationBarSearchInputChanged(e){
			console.log(e.text)
			this.searchVal = e.text
		},
		onNavigationBarSearchInputConfirmed(){
			this.goPage(this.searchVal)
		},
		onNavigationBarButtonTap() {
			uni.navigateBack()
		},
		methods: {
			onClick(){
				this.$toast('刷新一下')
			},
			goPage(val){
				uni.navigateTo({
					url:'/pages/search-result/search-result?search='+val
				})
			}
		}
	}
</script>

<style>
.page{
	padding: 30rpx;
}
.item{
	background-color: #f5f5f5;
	border-radius: 40rpx;
	padding: 10rpx 30rpx;
	font-size: 24rpx;
}
</style>
